<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_666967_j5dm8ezlac3di.css">
		<link rel="stylesheet" href="css/conversionCode.css">
		<title>兑换码</title>
	</head>

	<body>
		<div class="web">
			<div class="converBox">
				<p>请输入兑换码</p>
				<input type="text" name="_code" value="">
				<br/>
				<div class="buttonBox">
					<button>确定</button>
					<div class="yinY">
					</div>
				</div>

			</div>

			<div class="exchange_successful">
				<div class="connterT">
					<p>兑换成功!</p>
					<span class="downT">
                    <i class="iconfont icon-guanbi"></i>
                </span>
				</div>
			</div>
			<div class="exchange_fault">
				<div class="connterF">
					<p>兑换失败!</p>
					<button class="again">重新输入</button>
					<span class="downF">
                    <i class="iconfont icon-guanbi"></i>
                </span>
				</div>
			</div>

			<!-- home -->
			<div class="homebtn">
				<a href="index.html">
					<i class="iconfont icon-fangzi"></i>
				</a>
			</div>
		</div>
		<!-- <script src="js/jiuxi.js"></script> -->

		<script>
			// 兑换码
			var converBox = document.querySelector('.converBox');
			var inp = converBox.querySelector('input');
			var but = converBox.querySelector('button');
			// 兑换成功与失败
			var exchange_successful = document.querySelector('.exchange_successful');
			var exchange_fault = document.querySelector('.exchange_fault');
			var downT = exchange_successful.querySelector('.downT');
			var connterT = document.querySelector('.connterT');
			var connterF = document.querySelector('.connterF');
			var downF = exchange_fault.querySelector('.downF');
			var again = exchange_fault.querySelector('.again');
			var buttonBox = document.querySelector('.buttonBox');
			var btn = buttonBox.querySelector('button');
			but.addEventListener('click', function() {
				if(inp.value == 1) {
					exchange_successful.style.display = 'block';
				} else {
					exchange_fault.style.display = 'block';
				}

			})
			downT.addEventListener('click', function() {
				exchange_successful.style.display = 'none';

			});
			
			downF.addEventListener('click', function() {
				exchange_fault.style.display = 'none';
			})
			again.addEventListener('click', function() {
				exchange_fault.style.display = 'none';
				inp.focus();
			})
			
            btn.addEventListener('touchstart',function(){
                btn.style.opacity='0.5';
            })
            btn.addEventListener('touchend',function(){
                btn.style.opacity='1';
            })
		</script>

	</body>

</html>